<template>
  <div>
    <!-- 登录注册跳转 -->
    <ye-tou></ye-tou>
    <dao-hang></dao-hang>
    <el-row :gutter="20">
      <el-col :span="12"
        ><div class="grid-content bg-purple">
          <h4 class="left">预定房间</h4>
        </div></el-col
      >
      <el-col :span="12"
        ><div class="grid-content bg-purple">
          <el-steps :active="1" simple>
            <el-step title="填写订单" icon="el-icon-edit"></el-step>
            <el-step title="完成预定" icon="el-icon-upload"></el-step>
          </el-steps></div
      ></el-col>
    </el-row>
    <el-row :gutter="20">
      <!-- 表单 -->
      <el-col :span="12">
        <div class="grid-content bg-purple form">
          <div class="header">
            <b class="pre">预定信息&emsp; </b>
            <span>已是会员？立即</span>
            <b class="pre"> 登录</b>
          </div>
          <!-- 订房必读 -->
          <ul>
             <li style="font-size:18px; font-weight: bold; padding-bottom:20px">订房必读</li>
            <li style="font-size:14px;"><i class="el-icon-warning-outline"></i>该房型允许携带儿童入住</li>
            <li style="font-size:14px;"><i class="el-icon-warning-outline"></i>不接受18岁以下客人在无监护人陪同的情况下入住</li>
            <li style="margin-right:30px;font-size:14px;border-bottom：1px solid #f5f5f5;"><i class="el-icon-warning-outline ore"></i>加床及儿童政策取决于您所选的房型，若超过房型限定人数，或携带儿童年龄不在政策描述范围内，可能需收取额外费用，提出的任何要求均需获得酒店的确认。</li>
          </ul>
          <!-- 选择房型 -->
          <p class="caidan">
            选择房型:&emsp;
            <el-radio-group v-model="radio" >
              <el-radio :label="0">{{ fname[0] }}</el-radio>
              <el-radio :label="1">{{ fname[1] }}</el-radio>
              <el-radio :label="2">{{ fname[2] }}</el-radio>
              <el-radio :label="3">{{ fname[3] }}</el-radio>
            </el-radio-group>
          </p>
          <!-- 入住时间 -->
          <div class="date">
            <el-form ref="form" label-width="80px">
              <el-form-item label="入住时间:">
                <el-col :span="10">
                  <el-date-picker
                    type="date"
                    placeholder="选择入住日期"
                    v-model="date1"
                    style="width: 100%"
                     :picker-options="pickerOption0"
                  ></el-date-picker>
                </el-col>
                <el-col class="line" :span="1">至</el-col>
                <el-col :span="10">
                  <el-date-picker
                    placeholder="选择离店日期"
                    v-model="date2"
                    style="width: 100%"
                    :picker-options="pickerOption"
                  ></el-date-picker>
                </el-col>
                <span>共住{{date2>date1?((date2-date1)/1000/60/60/24):0}}晚</span>
              </el-form-item>
            </el-form>
            <h4>房间数量：&emsp; <span>1</span>&emsp;<span>间</span></h4>
            <!-- 入住信息 -->
            <div>
              <h3 class="start">入住信息</h3>
              <div style="font-size: 12px; padding-left: 20px; color: red">
                *请按实际入住人填写，姓名与证件保持一致
              </div>
              <label for="" class="input"
                >*入住人：&emsp;&emsp;
                <input
                  class="big"
                  v-model="name"
                  type="text"
                  placeholder="请输入姓名" @blur="namecheck"
                />
                &ensp;<span :class="nameclass">{{ namemsg }}</span>
              </label>
              <label for="" class="input"
                >*身份证号码:&emsp;
                <input
                  class="big"
                  v-model="idc"
                  type="text"
                  placeholder="身份证号码" @blur="idcheck"
                />
                &ensp;<span :class="idclass">{{ idmsg }}</span>
              </label>
              <label for="" class="input"
                >*手机号码：&emsp;
                <input
                  class="big"
                  type="phone"
                  v-model="phone"
                  placeholder="请输入手机号码" @blur="phonecheck"
                />&ensp;<span :class="phoneclass">{{ phonemsg }}</span>
              </label>
              <label for="" class="input"
                >常用邮箱：&emsp;
                <input
                  type="text"
                  class="big"
                  v-model="email"
                  placeholder="请输入邮箱" 
                />&ensp;<span :class="emailclass">{{ emailmsg }}</span>
              </label>
              <label for="" class="input">
                <input type="checkbox" v-model="agree" />同意《销售与取消政策》
              </label>
              <div class="end">
                <p class="money">房费 ￥{{ price[radio] }}.00</p>
                <p class="sub">税+服务费 ￥0.00</p>
                <h3>
                  订单总价 <span v-if="price[radio]!=undefined">￥{{ price[radio]*(date2>date1?((date2-date1)/1000/60/60/24):0) }}</span>
                </h3>
                <el-button class="submit" @click="btn" :disabled="!agree">提交订单</el-button>
              </div>
            </div>
          </div>
        </div></el-col
      >
      <!-- 房间 -->
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <img src="/img/room/room01.jpg" alt="" v-if="radio==''">
          <img v-else :src="`/img/room/${pic[radio]}`" alt="" style="width: 95%" />
          <h4 class="title">{{hname}}</h4>
          <div >
            <i class="el-icon-star-on "></i>
            <i class="el-icon-star-on"></i>
            <i class="el-icon-star-on"></i>
            <i class="el-icon-star-on"></i>
            <i class="el-icon-star-on"></i>五星级
          </div>
          <p class="adress">
            免费上网|24小时热水|会员积分|健身房
          </p>
          <div class="room">
            <h4>房型餐食详情</h4>
            <p class="content">
              房间描述：房间配置1.8米大床，房间面积40平方，房间采用智能化装修设计，手机即可连接智能客控系统，配备汉斯格雅淋雨花洒，电动双层窗帘，65寸TCL智能投屏电视，手机无线充电，放大化妆镜，坚守高品质标准。不同房间可能存在偏差，具体以酒店实际为准，详情咨询可致电前台
            </p>
          </div>
          <div class="notice">
            <h4>酒店公告</h4>
            <div class="content">
              <div>
                取消政策：2021-10-12
                18:00前可免费取消;18:00后支付，支付后房间为您保留整晚
              </div>
              <div>酒店电话：021-61369066</div>
              <div>客服电话：4008-121-121</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <yewei></yewei>
  </div>
</template>
<script>
import DaoHang from "../components/DaoHang.vue";
import YeTou from "../components/YeTou.vue";
import Yewei from "../components/Yewei.vue";
import qs from 'qs'
export default {
  components: { DaoHang,YeTou, Yewei },
  data() {
    return {
      username: sessionStorage.getItem("username")||localStorage.getItem("username"),//获取登录用户名
      userid:"",//用户名的id
      pickerOption0:{//日期禁用
         disabledDate(time){
          return time.getTime()<Date.now()-8.64e7;
        }
      },
      pickerOption:{
        disabledDate(time){
          return time.getTime()<Date.now();
        }
      },
      pic:[],//房型的图片
      hname:"",//酒店名称
      oid:"",//房间id
      value: '',
      date1: "",//入住日期
      date2: "",//离店日期
      radio: "",
      fname: [],//房间类型
      price: [],//房间价格
      rids:[],//房型号id
      // 表单变量
      name: "",//入住人姓名
      phone: "",//入住人电话
      email: "",//入住人邮箱
      agree: false,//同意框，开局时false
      idc: "",//入住人身份证号码
      phoneclass: {
        //手机验证
        success: false,
        fail: false,
      },
      phonemsg: "订单提交后，我们将预定信息发送至您手机", //手机验证显示提示信息
      emailmsg: "订单提交后，我们将预定信息发送至您", //邮箱验证
      emailclass: {
        success: false,
        fail: false,
      },
      // 姓名验证
      namemsg: "", //姓名验证
      nameclass: {
        success: false,
        fail: false,
      },
      idmsg: "",
      idclass: {
        success: false,
        fail: false,
      },
    };
  },
   mounted(){//发送axios请求获取房间信息和酒店信息，通过详情传过来的酒店名称。查出
       this.$axios.get(`/room/${this.$route.query.nums}`).then(result=>{
        // console.log(result.data);
        let res=result.data.data;
        console.log(res);
        for(var i in res){
          this.pic.push(res[i].rpic)
          this.hname=res[0].hotelname//酒店名
          this.fname.push(res[i].type);//房间类型
          this.price.push(res[i].rprice);//房间价格
          this.rids.push(res[i].rid)//房间id号
          console.log(this.rids);
          // console.log(res[i].rdetail);
      
        }
        console.log(this.pic);
        })
        // 发送axios请求获取用户名的id
         this.$axios.get(`/users/${this.username}`).then(res=>{
          
           let id=res.data.data[0]
           this.userid=id.uid
            console.log(this.userid);
         });
    },
  methods: {//验证
    namecheck(){
       var reg = /^[\u4e00-\u9fa5]{2,6}$/;
      var result = reg.test(this.name);
      if (result == true) {
        this.nameclass = {
          success: true,
          fail: false,
        };
        this.namemsg = "姓名格式正确";
        return true
      } else {
        this.nameclass = {
          success: false,
          fail: true,
        };
        this.namemsg = "姓名格式不正确";
        return false
      }
    },
    idcheck(){
       var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      var result = reg.test(this.idc);
      if (result == true) {
        this.idclass = {
          success: true,
          fail: false,
        };
        this.idmsg = "身份证号码格式正确";
        return true
      } else {
        this.idclass = {
          success: false,
          fail: true,
        };
        this.idmsg = "身份证号码格式不正确";
        return false
      }
    },
    phonecheck(){
      var reg = /^1[3-9]\d{9}$/;
      var result = reg.test(this.phone);
      if (result == true) {
        this.phoneclass = {
          success: true,
          fail: false,
        };
        this.phonemsg = "手机号码格式正确";
        return true
      } else {
        this.phoneclass = {
          success: false,
          fail: true,
        };
        this.phonemsg = "手机号码格式不正确";
        return false
      }
    },
    rtime(timedate){
      var json_date=new Date(timedate).toJSON();
      return new Date(+new Date(json_date)+8*3600*100).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'');
    },
    date(){//验证入住时间是否合格
      if(this.date1!=''&&this.date2!=''&&this.date2>this.date1){
        return true
      }else{
        alert('请选择正确的入住时间');
        return false
      }
    },
    btn() {
      if(this.namecheck() && this.idcheck() && this.phonecheck()&&this.date()&&this.fname[this.radio]!=undefined){
        console.log( this.fname[this.radio]);
        this.oid=new Date().getTime();
         this.pric=this.price[this.radio];
         this.rids[this.radio]
         console.log(this.radio);
         let time1=this.date1
        let time2=this.date2
        console.log(this.name);
        console.log( this.rtime(time1));
        let obj={
          user_id:this.userid,
          room_id:this.rids[this.radio],
          order_num:this.oid,
          oname:this.name,
          oidentity:this.idc,
          ophone:this.phone,
          checkin:this.rtime(time1),
          checkout:this.rtime(time2),
          price:this.price[this.radio]*(this.date2>this.date1?((this.date2-this.date1)/1000/60/60/24):0)
          }
       obj= qs.stringify(obj);
        this.$axios.post("/ordering/add",obj ).then(result=>{
          console.log(result);
        })
        this.$message.success("恭喜您！预定成功！");
        this.$router.push(`/aplay?orderNum=${this.oid}`);
        return true;
        // this.getdata();
      }else{
        this.$message.error("请填写完整信息")
      }
      
    },
    
  },
  
};
</script>
<style scoped lang="scss">
a:hover {
  color: red;
}
/* 验证成功的样式 */
.success {
  background-color: lightGreen;
  color: green;
  border: green 1px solid;
}
/* 验证失败的样式 */
.fail {
  background-color: red;
  color: #f5f5f5;
  border: red 1px solid;
}
.start {
  color: rgb(64, 158, 255);
  padding: 30px 0 10px 30px;
  border-bottom: 2px solid rgb(193, 193, 193);
}
.input {
  display: block;
  padding: 20px 30px 0 20px;
  /* font: 900; */
}
.money {
  padding-top: 20px;
  border-top: 2px solid rgb(193, 193, 193);
}
.argee {
  padding-bottom: 20px;
}
.input .tip[data-v-1b5a9218] {
  font: 12px;
}
.end {
  text-align: center;
}
.btn {
  color: rgb(64, 158, 255);
  height: 30px;
}

.sub {
  border-bottom: 2px solid rgb(193, 193, 193);
  padding-bottom: 20px;
}
.big {
  height: 30px;
  border-radius: 5px;

  border: 1px solid rgb(193, 193, 193);
}
.big:focus {
  outline: none;
  border-color: rgb(64, 158, 255) !important;
  opacity: 1;
}
.submit {
  width: 140px;
  height: 35px;
  background-color: rgb(0, 123, 255);
  color: #fff;
  border-radius: 5px;
}
// 下拉菜单的样式
.caidan {
  line-height: 60px;
  margin-left: 30px;
  border-top: 2px solid rgb(193, 193, 193);
}
.btnf {
  outline: rgb(156, 0, 80);
  background-color: rgb(156, 0, 80);
}
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.process-status {
  background-color: rgb(85, 26, 139);
}
.left {
  margin: 0;
  height: 45.99px;
  line-height: 45.99px;
  background-color: #fff;
  color: rgb(64, 158, 255);
  padding-left: 30px;
  font-size: 22px;
}
.right {
  text-align: left;
}
// 设置表单页的背景颜色
.form[data-v-3c1ef684] {
  background-color: #fff;
}
.header {
  border-top: 2px solid rgb(193, 193, 193);
  border-bottom: 2px solid rgb(193, 193, 193);
  padding: 30px 0 10px 30px;
}
// 左右布局的样式
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #f5f5f5;
  padding-left: 10px;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  text-align: left;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.el-icon-star-on {
  color: gold;
  text-align: left;
}
// 设置地址处的样式

.icon {
  font-size: 14px;
  padding-bottom: 30px;
}
// 设置登录和注册跳转的样式
.el-icon-user {
  color: rgb(64, 158, 255);
}
.el-icon-user,
.login {
  color: rgb(64, 158, 255);
  padding-right: 10px;
}

.user {
  padding-bottom: 20px;
  padding-top: 20px;
  margin-right: 20px;
  text-align: right;
}
a[data-v-3c1ef684] {
  text-decoration: none;
}
.el-breadcrumb {
  padding-bottom: 10px;
}
.pre,
.nub {
  color: rgb(64, 158, 255);
}
.date {
  padding: 10px 30px;
}
.room {
  border-bottom: 2px solid rgb(193, 193, 193);
  border-top: 2px solid rgb(193, 193, 193);
}
.adress,.content {
  font-size: 14px;
  padding-bottom: 30px;
}
.el-icon-star-on{
color: gold;
}
</style>